<style>
.personalbox {
    height: 500px;
    width: 700px;
    background-color: yellow;
    box-shadow: 2px 2px 10px rgb(150, 150, 150);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}

.photo {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 20px;
    background-color: blue;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input {
    margin-bottom: 20px;
}

.input-label {
    display: inline-block;
    width: 60px;
    text-align: right;
    margin-right: 10px;
}

img {
    height: 150px;
}
</style>

<template>
    <div class="personalbox">
        <div class="photo">
            <img src="https://foruda.gitee.com/avatar/1724900453070081816/8332172_j-menglin_1724900453.png!avatar200" alt="">
        </div>
        <div class="input">
            <span class="input-label">用户名:</span>
            <el-input v-model="username" style="width: 240px" disabled placeholder="admin" />
        </div>
        <div class="input">
            <span class="input-label">姓名:</span>
            <el-input v-model="name" style="width: 240px" placeholder="请输入姓名" />
        </div>
        <div class="input">
            <span class="input-label">描述:</span>
            <el-input v-model="DoctorDescribe" style="width: 240px" placeholder="请输入个人描述" />
        </div>
        <el-button type="primary" @click="save">保存</el-button>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// 为每个输入框创建独立的 ref
const username = ref('admin')  // 用户名字段，默认不可编辑
const name = ref('')           // 姓名字段
const DoctorDescribe = ref('')          // 电话字段

// 保存按钮的点击事件
const save = () => {
    console.log("保存成功！")
    console.log("用户名:", username.value)
    console.log("姓名:", name.value)
    console.log("描述:", phone.value)
}
</script>
